<template>
  <a-layout style="min-height: 100vh">
    <a-layout-content style="background-color: #F2F2E6">

        <v-card style="width: 60%; margin: 8vh auto; padding-bottom: 4vh">
          <a-page-header
            style="border: 1px solid rgb(235, 237, 240)"
            title="通知中心"
          >
            <template slot="extra">
              <a-button key="1" type="primary" @click="readAll" :loading="loadReaing">
                全部已读
              </a-button>
            </template>
          </a-page-header>

          <a-list
            style="margin-right: 2vw; margin-left: 1vw"
            class="demo-loadmore-list"
            :loading="loading"
            item-layout="horizontal"
            :data-source="data"
          >
            <div
              v-if="showLoadingMore"
              slot="loadMore"
              :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
            >
              <a-spin v-if="loadingMore" />
              <a-button v-else
                        :disabled="moreDisable"
                        @click="getDataLoadMore"
                        style="margin-top: 1vh"
                        type="primary"
                        v-show="showBtn">
                查看更多
              </a-button>
              <span v-show="!showBtn">没有更多通知了</span>
            </div>
            <a-list-item slot="renderItem" slot-scope="item, index">
              <a-button slot="actions" disabled v-if="item.statement === '已读'" >已读</a-button>
              <a-button slot="actions" v-else @click="readMessage(item)">确认</a-button>
              <a-list-item-meta
                :description="item.content"
              >
                <span slot="title" style="font-family: BlinkMacSystemFont,sans-serif; font-size: 15px">
                  <b>系统提示</b>&emsp;{{item.relativeTime}}
                </span>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </v-card>
    </a-layout-content>
  </a-layout>



</template>
<script>
  import request from '../utils/request'

  export default {
    data() {
      return {
        loadReaing: false,
        messCount: 10,
        loading: true,
        moreDisable: false,
        loadingMore: false,
        showLoadingMore: true,
        data: [],
        showBtn: true,
        totalData: [],
      };
    },
    mounted() {
      this.getDataMount()
    },
    methods: {
      getDataMount(){
        request.get('/message').then(res => {
          if (res.code === '200'){
            this.totalData = res.data
            for (let i = 0; i < res.data.length; i++){
              if (res.data[i].statement === '未读'){
                this.$messageBus.$emit('dot',true)
                break
              }
              else
                this.$messageBus.$emit('dot',false)
            }
            this.loading = false
            this.loadReaing = false
            this.moreDisable = false
            this.data = res.data.length > this.messCount ? res.data.slice(0, this.messCount) :  res.data
            if (res.data.length > this.messCount - 10 && res.data.length <= this.messCount)
              this.showBtn = false
          }
        })
      },
      getDataLoadMore(){
        this.loadingMore = true
        this.messCount = this.messCount + 10
        request.get('/message').then(res => {
          if (res.code === '200'){
            this.totalData = res.data
            for (let i = 0; i < res.data.length; i++){
              if (res.data[i].statement === '未读'){
                this.$messageBus.$emit('dot',true)
                break
              }
              else
                this.$messageBus.$emit('dot',false)
            }
            this.loadingMore = false
            this.data = res.data.length > this.messCount ? res.data.slice(0, this.messCount) :  res.data
            if (res.data.length > this.messCount - 10 && res.data.length <= this.messCount)
              this.showBtn = false
            this.$nextTick(() => {
              window.dispatchEvent(new Event('resize'));
            });
          }
          else {
            this.sendWarnMessage('加载失败')
            this.loadingMore = false
          }
        })
      },
      readMessage(item){
        request.post('/message', {id: item.id, statement: '已读'}).then(res => {
          if (res.code === '200'){
            this.getDataMount()
          }
        })
      },
      readAll(){
        this.loadReaing = true
        this.loading = true
        this.moreDisable = true
        request.post('/message/readAll').then(res => {
          if (res.code === '200'){
            this.getDataMount()
          }
        })
      }
    },
  };
</script>
<style>
  .demo-loadmore-list {
    min-height: 350px;
  }
</style>
